<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <!-- checkbox的v-model绑定字符串类型获取布尔值，如果是数组类型则是获取value值 -->

      <!-- 1.checkbox单选框 -->
      <label for="agree">
        <input type="checkbox" id="agree" v-model="isAgerr" />同意协议
      </label>
      <h2>您选择的性别是：{{isAgerr}}</h2>
      <button :disabled="!isAgerr">下一步</button>

      <br />

      <!-- 2.checkbox多选框 -->
      <!-- <input type="checkbox" value="篮球" v-model='hobbies'>篮球
    <input type="checkbox" value="足球" v-model='hobbies'>足球
    <input type="checkbox" value="羽毛球" v-model='hobbies'>羽毛球
    <input type="checkbox" value="乒乓球" v-model='hobbies'>乒乓球 -->

      <label :for="item" v-for="item in originHobbies">
        <input
          type="checkbox"
          :value="item"
          :id="item"
          v-model="hobbies"
        />{{item}}
      </label>
      <h2>您的爱好是：{{hobbies}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好',
          isAgerr: false, // 单选框
          hobbies: [], // 多选框
          originHobbies: ['篮球', '足球', '羽毛球', '乒乓球', '台球'] // value值绑定
        },
        methods: {}
      })
    </script>
  </body>
</html>
